<template>
  <div id="app" style="height:100%;width:100%;">

    <div id="menuLeft" style="float: left; height:100%;width:15%;">
      <el-card style="height:100%;width:100%;">
        <div id="VisualShow">
          <h3>加载本地shp文件</h3>
          <input type="file" id="uploadFileInput" name="zip" @change="selectShpFile"/>
        </div>
      </el-card>
    </div>

    <!--展示本地shp文件-->
    <div id="shpMap" :style="{height:'100%',width:'82%', float: 'left', marginLeft:'20px'}" ></div>

  </div>
</template>
<script>

import * as maptalks from "maptalks";
let shpfile = require('shapefile');

export default {
  data() {
    return {
      map: null,
      fileList: [],
      layer:null
    };
  },
  created() {

  },
  mounted() {
    this.mapShow();
  },
  methods: {
    //展示maptalks地图
    mapShow() {
      //地图容器
      this.map = new maptalks.Map('shpMap', {
        center: [116.409686, 39.99999999],
        zoom: 9,
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate:'https://api.mapbox.com/styles/v1/litaizeng/ckm398gud9bmz17rykd0lemst/tiles/256/' +
              '{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibGl0YWl6ZW5nIiwiYSI6ImNrbHhycTZyNzEza2IydnBsbmo3dHh' +
              '0Z3UifQ.q8qjMrqztI3hgqcyxolfMQ',
          subdomains: ['a','b','c','d'],
          attribution: false
        }),
      });

    },
    async selectShpFile() {
      //获取上传文件
      const shpFile = document.getElementById("uploadFileInput").files[0];
      //将文件转为二进制编码
      let fileReader = new FileReader();
      fileReader.readAsArrayBuffer(shpFile)
      //定义一个变量a作为虚拟dom节点，因为试验数据没有id属性
      var a = 1
      //文件读取成功
      const that = this
      fileReader.onload = function () {
        //导入shpfile包
        let shapefile = require("shapefile");
        //读取二进制数据转成geojson
        shapefile.read(this.result).then((geojson) => {
          //遍历geojson数据
          geojson.features.map((feature) => {
            //console.log(feature)
            //获取类型
            let type = feature.geometry.type
            let mapdata = feature.geometry.coordinates
            //判断shp数据类型
            if (type == "LineString") {
              //创建线
              const line = new maptalks.LineString(mapdata, {
                arrowStyle: null, // arrow-style : now we only have classic
                arrowPlacement: 'vertex-last', // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
                visible: true,
                editable: true,
                cursor: null,
                shadowBlur: 0,
                shadowColor: 'black',
                draggable: false,
                dragShadow: false, // display a shadow during dragging
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
                symbol: {
                  'lineColor': 'red',
                  'lineWidth': 10
                }
              })
              //导入map中
              that.layer = new maptalks.VectorLayer(a++, line).addTo(that.map);
            } else if (type == "Polygon") {
              const polygon = new maptalks.Polygon(mapdata, {
                visible: true,
                editable: true,
                cursor: 'pointer',
                shadowBlur: 0,
                shadowColor: 'black',
                draggable: false,
                dragShadow: false,
                drawOnAxis: null,
                symbol: {
                  'lineColor': '#34495e',
                  'lineWidth': 2,
                  'polygonFill': 'rgb(135,196,240)',
                  'polygonOpacity': 0.6
                }
              })
              that.layer = new maptalks.VectorLayer(a++, polygon).addTo(that.map);
            } else if (type == "Point") {
              const marker = new maptalks.Marker(mapdata, {
                visible: true,
                editable: true,
                cursor: 'pointer',
                shadowBlur: 0,
                shadowColor: 'black',
                draggable: false,
                dragShadow: false,
                drawOnAxis: null,
              })
              that.layer = new maptalks.VectorLayer(a++, marker).addTo(that.map);
            }
          })
        })
      }
    },
    clearMap() {
      //this.map.clear()
    }
  }
};
</script>
<style>
.map {
  overflow: hidden;
  width: 100%;
  height: 1000px;
  margin: 0;
  font-family: "微软雅黑";
}

.amap-copyright {
  display: none !important;
}

.amap-logo {
  display: none !important;
}


</style>